{extend name="../../admin/view/public/admin_base"}

{block name='style'}
<style>
    .wb-container {
        height: 100%;
        width: 100%;
        margin: 0 0 0 0;
        padding: 0;
        /*padding-top: 120px;*/
        background: linear-gradient(180deg, #F4F8FE 0%, #FFFFFF 100%);
    }

    .wb-content {
        height: calc(100% - 60px);
        width: 100%;
    }

    .header-block {
        width: 100%;
        height: 60px;
    }

    .header-wrap {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
        font-size: 14px;
        background: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .header-left {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 1188px;
    }

    .header-logo {
        height: 40px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .header-logo-img {
        height: 40px;
        width: 40px;
        vertical-align: middle;
        border-radius: 50%;
    }

    .header-logo .title {
        font-size: 18px;
        color: #666;
        margin-left: 12px;
    }

    .copyright-footer {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 88;
        border-radius: 0;
        box-shadow: 0 -2px 5px 0 rgba(33, 89, 229, 0.08);
    }

    .login-bg-box {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .login-body {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }
</style>
<style>
    .we7-modal-dialog .login-modal-header, .modal-dialog .login-modal-header {
        background-color: unset;
    }
    .login-modal-header{
        background-color: unset;
        justify-content: flex-start;
    }
    .license-modal-content {
        background: white;
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        padding: 30px;
        max-width: 500px;
        width: 100%;
        color: #333;
        transition: all 0.4s ease;
    }

    .login-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        position: relative;
        border-bottom: none;
        padding-bottom: 0;
    }

    .login-modal-header h2 {
        font-weight: 700;
        letter-spacing: 1px;
        margin-bottom: 0;
        color: #2c3e50;
        font-size: 1.5rem;
    }

    .login-modal-header::after {
        content: '';
        position: absolute;
        bottom: -15px;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, #3498db, #2ecc71);
        border-radius: 10px;
    }

    .form-label {
        font-weight: 600;
        margin-bottom: 8px;
        color: #2c3e50;
    }

    .form-control {
        background: #f8f9fa;
        border: 1px solid #e1e5eb;
        color: #495057;
        padding: 12px 15px;
        border-radius: 10px;
        transition: all 0.3s;
    }

    textarea.form-control {
        min-height: 100px;
        resize: vertical;
    }

    .form-control:focus {
        background: white;
        border-color: #3498db;
        box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
        color: #495057;
    }

    .form-control::placeholder {
        color: #adb5bd;
    }

    .btn-primary {
        background: linear-gradient(90deg, #3498db, #2ecc71);
        border: none;
        padding: 12px 20px;
        font-weight: 600;
        letter-spacing: 0.5px;
        border-radius: 10px;
        width: 100%;
        margin-top: 10px;
        transition: all 0.3s;
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        color: white;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 20px rgba(52, 152, 219, 0.4);
    }

    .btn-primary:active {
        transform: translateY(0);
    }

    .result-container {
        margin-top: 25px;
        padding: 20px;
        border-radius: 15px;
        background: #f8f9fa;
        display: none;
        border: 1px solid #e1e5eb;
    }

    .success {
        border-left: 4px solid #2ecc71;
    }

    .error {
        border-left: 4px solid #e74c3c;
    }

    .result-icon {
        font-size: 24px;
        margin-right: 15px;
    }

    .success .result-icon {
        color: #2ecc71;
    }

    .error .result-icon {
        color: #e74c3c;
    }

    .expiry-date {
        background: #f1f8ff;
        padding: 12px 15px;
        border-radius: 10px;
        margin-top: 15px;
        font-weight: 500;
        border: 1px solid #d1e7ff;
    }

    .expiry-label {
        color: #7f8c8d;
        font-size: 0.9rem;
    }

    .expiry-value {
        font-size: 1.1rem;
        color: #3498db;
    }

    .license-example {
        font-size: 0.85rem;
        color: #7f8c8d;
        margin-top: 5px;
    }

    .footer-note {
        text-align: center;
        margin-top: 25px;
        font-size: 0.85rem;
        color: #7f8c8d;
    }

    .modal-footer {
        border-top: none;
        padding-top: 0;
    }

    .btn-close {
        opacity: 0.8;
        background: unset;
        font-size: 18px;
    }

    .btn-close:hover {
        opacity: 1;
    }

    .launch-btn {
        background: linear-gradient(90deg, #3498db, #2ecc71);
        border: none;
        padding: 15px 40px;
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: 1px;
        border-radius: 50px;
        box-shadow: 0 10px 25px rgba(52, 152, 219, 0.4);
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
        color: white;
    }

    .launch-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(52, 152, 219, 0.6);
    }

    .launch-btn:active {
        transform: translateY(0);
    }

    .launch-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: 0.5s;
    }

    .launch-btn:hover::before {
        left: 100%;
    }

    .modal-content {
        background: transparent;
        border: none;
        box-shadow:none;
    }
    .modal.in .modal-dialog, .modal-dialog{
        min-width: unset !important;
    }
</style>
{/block}
{block name='content'}

<link rel="stylesheet" href="__ADMIN_CSS__/login.css">

<div class="loader" style="display:none;">
    <div class="la-ball-clip-rotate">
        <div></div>
    </div>
</div>

<!--头部信息 start-->
<div class="header-block"></div>
<div class="header-wrap">
    <div class="header-left">
        <div class="header-logo">
            <img src="{:tomedia($websiteSets['logo']?:'images/global/logo.png')}" alt="{$websiteSets['name']}-logo" class="header-logo-img">
            <span class="title">{$websiteSets['name']?:'星数引擎'}</span>
        </div>
    </div>
    <div class="header-right">

    </div>
</div>
<!--头部信息 end-->

<div class="login-body" style="background-image: url('__ADMIN_IMG__/login_bg.jpg')">
    <div class="system-login-new system-login-new--half auto" style='height: 491px;'>

        <div class="login-bg-box">
            <img src="{if $websiteSets['poster']}{:tomedia($websiteSets['poster'])}{else}__ADMIN_IMG__/inner.png{/if}" alt="" style="width: 80%;position: absolute;top: -10%;">
        </div>

        <div class="login-panel">
            <div class="title">
                登录
            </div>
            <form id="login-form" action="" method="post" class="we7-form">
                <div class="input-group-vertical">
                    <div class="form-group">
                        <input name="username" id="username" type="text" class="form-control" value="{$rememberUsername}"
                               placeholder="请输入用户名/手机登录">
                        <div class="help-block">请输入用户名/手机</div>
                    </div>
                    <div class="form-group" onkeypress="detectCapsLock(event)">
                        <div class="input-group">
                            <input name="password" id="password" type="password" class="form-control password"
                                   placeholder="请输入登录密码">
                            <span class="input-group-addon">
                                <i class="fa fa-eye-slash js-showPass"></i>
                            </span>
                        </div>
                        <div class="help-block">请输入登录密码</div>
                    </div>
                    <span style="display:none;color:#ff0000;" id="capitalizationTip">大写锁定已打开</span>

                    <div class="form-group verify-form-group">
                        <div class="input-group">
                            <input name="verify" type="text" class="form-control" placeholder="请输入验证码">
                            <a href="javascript:;" id="toggle" class="input-group-btn imgverify">
                                <img id="imgverify"
                                     src="{:url('admin/login/verify')}"
                                     title="点击图片更换验证码"
                                     onerror="this.src='__ADMIN_IMG__/noface.png'">
                            </a>
                        </div>
                        <div class="help-block">请输入验证码</div>
                    </div>
                </div>
                <div class="form-inline" style="margin-bottom: 15px;">
                    <div class="checkbox" style="height: 30px;display: flex;align-items: center;">
                        <input type="checkbox" value="true" id="rember" name="rember" {if !empty($rememberUsername)}checked{/if}>
                        <label for="rember" style="margin-top: 4px;margin-left: 8px;font-size: 14px;">记住用户名</label>
                    </div>
                </div>
                <div class="login-submit text-center">
                    <input type="submit" class="btn btn-primary btn-block" id="btn-login" value="登录" style="padding: 14px 32px;font-size: 14px;">
                    <div class="text-left we7-margin-bottom" style="display: none;">
                        还没有有账号？
                        <!-- <a href="{:url('admin/login/register')}" class="color-default">立即注册</a> -->
                        <a href="javascript:;" class="color-default" id="goRegister">立即注册</a>
                        <div class="pull-right">
                            <!--                        <a href="{:url('admin/login/forget')}" target="_blank" class="color-default">忘记密码？</a>-->
                            <a href="javascript:;" class="color-default" id="goForget">忘记密码？</a>
                        </div>
                    </div>
                </div>

                {if $systemExpireShow}
                <!-- 到期提醒 start -->
                <div class="fixed-header-tip" style="margin-top:10px;">
                    <div class="alert alert-danger" style="border:unset;background:rgba(254, 240, 240, 0.5);text-align:left;">
                        <text class="text text-danger">{$systemExpireText}</text>
                    </div>
                </div>
                <!-- 到期提醒 end -->
                {/if}
            </form>
        </div>
    </div>

    <!-- 许可证验证模态框 -->
    <div class="modal fade" id="licenseModal" tabindex="-1" aria-labelledby="licenseModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="license-modal-content">
                    <div class="login-modal-header">
                        <div>
                            <h2 class="modal-title" id="licenseModalLabel"><i class="fas fa-key me-2"></i>许可证验证</h2>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close-modal">x</button>
                    </div>

                    <div class="modal-body">
                        <div class="mb-4">
                            <label for="licenseKey" class="form-label">许可证密钥</label>
                            <textarea class="form-control" id="licenseKey" placeholder="例如: XXXXX-XXXXX-XXXXX-XXXXX" rows="4"></textarea>
                            <div class="license-example">请输入一个正确的许可证秘钥延长使用期限，否则将无法使用系统功能。</div>
                        </div>

                        <button id="verifyBtn" class="btn btn-primary">
                            <i class="fas fa-check-circle me-2"></i>验证许可证
                        </button>

                        <div id="resultContainer" class="result-container">
                            <div class="d-flex align-items-center">
                                <div class="result-icon">
                                    <i id="resultIcon"></i>
                                </div>
                                <div>
                                    <h5 id="resultTitle" class="mb-1"></h5>
                                    <p id="resultMessage" class="mb-0"></p>
                                </div>
                            </div>

                            <div id="expiryContainer" class="expiry-date mt-3">
                                <div class="expiry-label">许可证到期时间:</div>
                                <div id="expiryDate" class="expiry-value"></div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <div class="footer-note">
                            <i class="fas fa-lock me-1"></i> 您的许可证信息将被安全加密处理
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    function detectCapsLock(event) {
        // console.log(event)
        var e = event || window.event;
        var o = e.target || e.srcElement;
        var oTip = $("#capitalizationTip");
        var keyCode = e.keyCode || e.switch;
        var isShift = e.shiftKey || (keyCode == 16) || false;
        if (((keyCode >= 65 && keyCode <= 90) && !isShift) || ((keyCode >= 97 && keyCode <= 122) && isShift)) {
            oTip.show();
        } else {
            oTip.hide();
        }
    }

    $("#goRegister").click(function () {
        util.message('请在客户端完成注册流程后登录', "", "error")
    });

    $("#goForget").click(function () {
        util.message('请在客户端我的店铺中更改密码', "", "error")
    });

    var loginAction = function (e) {
        var verify = $(':text[name="verify"]').val();
        if (verify == '') {
            $(".verify-form-group").addClass('error');
            return false;
        }
        e.preventDefault();
        var postData = $("#login-form input").serializeArray();
        var postInit = {};

        for (var key in postData) {
            var data = postData[key]
            // console.log(data)

            $('[name="' + data.name + '"]').parents('.form-group').removeClass('error');
            if (!data.value && data.name != 'referer') {
                $('[name="' + data.name + '"]').parents('.form-group').addClass('error');
                return false
            }
            postInit[data.name] = data.value
        }
        if (postInit['rember']) {
            util.cookie.set('remember-username', postInit['username']);
        } else {
            util.cookie.del('remember-username');
        }
        if ($('input[name="smscode"]').val()) {
            postInit.smscode = $('input[name="smscode"]').val()
        }
        var stopVal = $('#btn-login').attr('stop');
        if (parseInt(stopVal) !== 0 && stopVal !== '' && stopVal !== undefined) {
            return;
        }
        $('#btn-login').attr('stop', 1).val('正在登录...');

        $.post("{:url('admin/login/login')}", postInit, function (json) {

            require(['tip'], function () {
                if (json.status == 0) {
                    tip.msgbox.err(json.result.message);
                } else if (json.status == -1) {
                    tip.msgbox.err(json.result.message);
                    $('#btn-login').attr('stop', 0).val('登录');
                } else if (json.status == -2) {
                    tip.msgbox.err(json.result.message);
                    $('#btn-login').attr('stop', 0).val('登录');

                    setTimeout(function () {
                        $("#licenseModal").modal('show')
                    }, 1500);
                } else if (json.status == 1) {
                    tip.msgbox.suc("登录成功");
                    $('#btn-login').attr('stop', 1).val('跳转中...');

                    setTimeout(function () {
                        location.href = json.result.url;
                    }, 500);

                    return true;
                }
            });

            $('#btn-login').attr('stop', 0).val('登录');
            $('#imgverify').prop('src', "{:url('admin/login/verify')}?" + Math.round(new Date().getTime()));

        }, 'json');

    };

    $('#login-form').on('submit', loginAction);
    // $('.js-login').click(loginAction)

    $('.js-showPass').on('click', function () {
        var passwordeye = $('.js-showPass');
        var password = $('#password');
        if (passwordeye.hasClass('fa-eye')) {
            passwordeye.removeClass('fa-eye').addClass('fa-eye-slash')
            password.prop('type', 'password')
        } else {
            passwordeye.removeClass('fa-eye-slash').addClass('fa-eye')
            password.prop('type', 'text')
        }
    });

    $('input').on('focus', function () {
        $(this).parents('.form-group').removeClass('error')
    });

    $('#toggle').click(function () {
        $('#imgverify').prop('src', "{:url('admin/login/verify')}?" + Math.round(new Date().getTime()));
        return false;
    });

    $(function () {
        $('.system-login-new.auto').height($('.login-panel').outerHeight())
    })

    // 显示验证码续订
    // setTimeout(function () {
    //     $("#licenseModal").modal('show')
    // }, 1000)

    document.getElementById('btn-close-modal').addEventListener('click', function() {
        $("#licenseModal").modal('hide')
    })
    document.getElementById('verifyBtn').addEventListener('click', async function() {
        const licenseKey = document.getElementById('licenseKey').value.trim();
        const resultContainer = document.getElementById('resultContainer');
        const resultIcon = document.getElementById('resultIcon');
        const resultTitle = document.getElementById('resultTitle');
        const resultMessage = document.getElementById('resultMessage');
        const expiryContainer = document.getElementById('expiryContainer');
        const expiryDate = document.getElementById('expiryDate');

        // 模拟验证过程
        const expireTime = await validateLicense(licenseKey);
        console.log('expireTime:', expireTime);

        // 显示结果容器
        resultContainer.style.display = 'block';

        // 移除之前的样式类
        resultContainer.classList.remove('success', 'error');

        if (expireTime) {
            checkSuccess(expireTime)
        } else {
            checkFail()
        }
    })

    function checkSuccess(expireTime){
        // 验证成功
        resultContainer.classList.add('success');
        resultIcon.className = 'fas fa-check-circle';
        resultTitle.textContent = '验证成功!';
        resultMessage.textContent = '您的许可证密钥有效，产品已激活。';

        // 显示到期时间
        // expiryDate.textContent = getExpiryDate();
        expiryDate.textContent = expireTime;
        expiryContainer.style.display = 'block';

        setTimeout(function () {
            $("#licenseModal").modal('hide')
        }, 2000);
    }

    function checkFail(){
        // 验证失败
        resultContainer.classList.add('error');
        resultIcon.className = 'fas fa-exclamation-circle';
        resultTitle.textContent = '验证失败!';

        if (!licenseKey) {
            resultMessage.textContent = '请输入许可证密钥。';
        } else {
            resultMessage.textContent = '您输入的许可证密钥无效或已过期。';
        }

        // 隐藏到期时间
        expiryContainer.style.display = 'none';
    }

    // 许可证验证逻辑
    async function validateLicense(licenseKey) {
        const username = $("#username").val();
        return new Promise((resolve) => {
            $.post("{:url('admin/login/checkAuthCode')}", {username:username,license:licenseKey}, function (json) {
                if (json.status === 0) {
                    tip.msgbox.err(json.result.message);
                    resolve(false);
                } else {
                    resolve(json.result.expireTime);
                }
            },"json")
        })
    }

    // 获取到期日期（模拟）
    function getExpiryDate() {
        const today = new Date();
        const expiry = new Date(today);

        // 设置到期时间为3个月后
        expiry.setMonth(expiry.getMonth() + 3);

        // 格式化日期
        return expiry.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
    }
</script>

{/block}

{block name='copyright'}
{if !empty($websiteSets['copyright'])}
<div class="container-fluid footer text-center copyright-footer">
    <div class="copyright">{$websiteSets['copyright'] | raw}</div>
</div>
{/if}
{/block}